<template>
  <div class="hello">
        <h1>{{msg}}</h1>
        <div v-html="htmlMsg"></div>  <!--  v-html 指令用于输出 html 代码-->
         <div>
           <!-- v-model 是 Vue.js 提供的一个非常强大且常用的双向数据绑定指令。
           它的核心作用是在表单元素（如输入框、复选框、下拉菜单等）
           和 Vue 实例的数据之间建立一个同步关系。 核心作用-->
                <label for="r1">修改颜色</label><input type="checkbox" v-model="changeColor" />
         </div>
         <!-- HTML 属性中的值应使用 v-bind 指令。-->
         <div v-bind:class="{class1:changeColor}"> v-bind:class 指令</div>
         <!-- Vue.js 都提供了完全的 JavaScript 表达式支持。-->
          {{5+5}}<br>
         <!-- 指令是带有 v- 前缀的特殊属性。
          指令用于在表达式的值改变时，将某些行为应用到 DOM 上。 -->
           <p v-if="seen">
                 我看见你了!!
           </p>
          <!-- 参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性 -->
           <pre><a v-bind:href="url">菜鸟教程</a></pre>
          <button v-on:click="reverseMessage">反转字符串</button>

           <template v-if="seen">
             <h1>菜鸟教程</h1>
             <p>学的不仅是技术，更是梦想！</p>
             <p>哈哈哈，打字辛苦啊！！！</p>
           </template>

           <div v-if=" Math.random() >0.5">
                sorry
           </div>
           <div v-else>
               yes
           </div>

           <div v-if="type =='A'">
                   A
           </div>
            <div v-else-if="type =='B'">
                B
            </div>
            <div v-else>
              C
            </div>
            <div v-show="seen">
                     show的用法
            </div>

  </div>
</template>

<script>
export default {
  name: 'Hello',
  data () {
    return {
      msg: 'Runoob!',
      htmlMsg: "<h1>菜鸟教程</h1>",
      changeColor: false,
      seen: false,
      url:"http://www.runoob.com",
      type:"B",
    }
  },
  methods:{
     reverseMessage(){
           console.log(this.msg);
           this.msg=this.msg.split("").reverse().join("");
     }
  }

/**
 第 1 步：this.message.split('')
 this.message: 在 Vue 组件的方法中，this 指向当前组件的实例。
 this.message 就是获取 data 中 message 的值，即字符串 "Hello"。
 .split(''): 这是 JavaScript String 对象的一个方法。它将一个字符串分割成一个字符串数组。
 参数 '' (一个空字符串) 表示将字符串中的每一个字符都作为数组的一个元素。
 结果: "Hello".split('') 执行后，会返回一个数组：['H', 'e', 'l', 'l', 'o']。
 第 2 步：.reverse()
 .reverse(): 这是 JavaScript Array 对象的一个方法。它会就地 (in-place) 反转数组中元素的顺序。
 结果: ['H', 'e', 'l', 'l', 'o'].reverse() 执行后，数组本身被修改，变为：['o', 'l', 'l', 'e', 'H']。
 第 3 步：.join('')
 .join(''): 这也是 JavaScript Array 对象的一个方法。它将数组的所有元素连接成一个字符串。
 参数 '' (一个空字符串) 表示在连接数组元素时，它们之间不使用任何分隔符。
 结果: ['o', 'l', 'l', 'e', 'H'].join('') 执行后，会返回一个字符串："olleH"。

 * **/

}
</script>
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>
